<template>
  <!-- 看点详情 -->
  <div class="box">
    <heads></heads>
    <div class="tit1">
      <div class="list">
        <div class="li" @click="$router.push('/')">
          <img src="../../assets/logo.png" />
          <!-- <span>帮帮同城</span> -->
        </div>
        <!-- <div style="color:#64B6A8;">在售楼盘</div> -->
      </div>
    </div>
    <template v-if="!tempdata.bid">
      <div style="width: 1200px;margin: auto;padding: 50px 0;">
        <h1 style="color: #000000;" v-if="$route.query.type != 'prot'">
          {{ data.title }}
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 1"
        >
          关于我们
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 3"
        >
          帮帮同城用户协议
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 2"
        >
          帮帮同城隐私政策
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 4"
        >
          个人信息保护声名
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 5"
        >
          平度之窗服务协议
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 7"
        >
          联系我们
        </h1>
        <h3
          style="color: #CCCCCC;margin-top: 10px;"
          v-if="
            $route.query.type == 'tales' ||
              $route.query.type == 'article' ||
              $route.query.type == 'banner'
          "
        >
          {{ data.create_date }}
        </h3>
        <div style="display: flex;margin-top: 10px;" v-else>
          <h3 style="color: #CCCCCC;" v-if="$route.query.type != 'prot'">
            {{ data.createDate }}
          </h3>
          <div
            style="display: flex;align-items: center;margin-left: 10px;"
            v-if="$route.query.type != 'prot'"
          >
            <span style="color: #333;font-size: 14px;">{{ data.author }}</span>
          </div>
          <!-- <span style="color: #333;font-size: 14px;" v-if="$route.query.type != 'prot'">{{data.author}}</span>  -->
          <!-- <div style="display: flex;align-items: center;margin-left: 10px;cursor: pointer;" @click="collect(1)"  v-if="isCollection == 0 && $route.query.type == 'watch'">
					<img style="width: 30px;height: 30px;" src="../../assets/shou2.png" />
					<span style="color: #333;font-size: 14px;">收藏</span>
				</div>
				<div style="display: flex;align-items: center;margin-left: 10px;cursor: pointer;" @click="collect(2)"  v-if="isCollection == 1 && $route.query.type == 'watch'">
					<img style="width: 30px;height: 30px;" src="../../assets/shou3.png" />
					<span style="color: #333;font-size: 14px;">已收藏</span>
				</div> -->
        </div>
        <div
          style="width: 1200px;margin: auto;background-color: #F2F2F2;height: 1px;margin-top: 30px;"
        ></div>

        <div
          style="color: #000000;padding: 50px 0; "
          class="contenttext"
          v-html="data.content"
        ></div>
      </div>
    </template>
    <template v-else>
      <div style="width: 1200px;margin: auto;padding: 50px 0;">
        <h1 style="color: #000000;" v-if="$route.query.type != 'prot'">
          {{ data.title }}
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 1"
        >
          关于我们
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 3"
        >
          帮帮同城用户协议
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 2"
        >
          帮帮同城隐私政策
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 4"
        >
          个人信息保护声名
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 5"
        >
          平度之窗服务协议
        </h1>
        <h1
          style="color: #000000;"
          v-else-if="$route.query.type == 'prot' && data.type == 7"
        >
          联系我们
        </h1>
        <h3
          style="color: #CCCCCC;margin-top: 10px;"
          v-if="
            $route.query.type == 'tales' ||
              $route.query.type == 'article' ||
              $route.query.type == 'banner'
          "
        >
          {{ data.create_date }}
        </h3>
        <div style="display: flex;margin-top: 10px;" v-else>
          <h3 style="color: #CCCCCC;" v-if="$route.query.type != 'prot'">
            {{ data.createDate }}
          </h3>
          <div
            style="display: flex;align-items: center;margin-left: 10px;"
            v-if="$route.query.type != 'prot'"
          >
            <span style="color: #333;font-size: 14px;">{{ data.author }}</span>
          </div>
          <!-- <span style="color: #333;font-size: 14px;" v-if="$route.query.type != 'prot'">{{data.author}}</span>  -->
          <div
            style="display: flex;align-items: center;margin-left: 10px;cursor: pointer;"
            @click="collect(1)"
            v-if="isCollection == 0 && $route.query.type == 'watch'"
          >
            <img
              style="width: 30px;height: 30px;"
              src="../../assets/shou2.png"
            />
            <span style="color: #333;font-size: 14px;">收藏</span>
          </div>
          <div
            style="display: flex;align-items: center;margin-left: 10px;cursor: pointer;"
            @click="collect(2)"
            v-if="isCollection == 1 && $route.query.type == 'watch'"
          >
            <img
              style="width: 30px;height: 30px;"
              src="../../assets/shou3.png"
            />
            <span style="color: #333;font-size: 14px;">已收藏</span>
          </div>
        </div>
        <div
          style="width: 1200px;margin: auto;background-color: #F2F2F2;height: 1px;margin-top: 30px;"
        ></div>

        <div
          style="color: #000000;padding: 50px 0; "
          class="contenttext"
          v-html="data.appendix"
        ></div>
      </div>
    </template>
    <floor></floor>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
export default {
  components: {
    floor,
    heads
  },
  data() {
    return {
      tempdata: {},
      data: {},
      aa:
        "<p>发士大夫士大夫士大夫</p><br><p>发士大夫士大夫士大夫</p><br><img src='../../assets/logo.png' style='width:60px;height:60px;border-radius:50%'' />",
      isCollection: 0,
      loginstate: true
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const type = this.$route.query.type;
      switch (type) {
        case "tales":
          this.getTalesPromotionDetail(this.$route.query.id);
          this.getUser(7); //楼盘资讯7
          break;
        case "house":
          this.getHouseTypeDetail(this.$route.query.id);
          break;
        case "watch":
          this.getWatchDetail(this.$route.query.id);
          this.getUser(4); //看点4
          break;
        case "article":
          this.getArticleInfoDetail(this.$route.query.id);
          this.getUser(6); //店铺资讯6
          break;
        //协议
        case "prot":
          this.getText(this.$route.query.id);
          break;
        case "banner":
          let data = JSON.parse(localStorage.getItem("banner"));
          if (data.bid) {
            this.tempdata = data;
            this.getBannerData(data);
          } else {
            this.getBannerDetails(data);
          }
          break;
      }
    },
    // 轮播图详情1
    getBannerDetails(data) {
      this.$getHttp("mob/home/getBannerDetail", { id: data.id }).then(data => {
        if (data.code == 200 && data.success) {
          this.data = data.map;
        }
      });
    },
    // 轮播图详情2
    getBannerData(data) {
      this.$getHttp("/api/mobile/vehicleOwner/getCarouselChartsById", {
        id: data.id
      }).then(data => {
        if (data.code == 200 && data.success) {
          data.carouselCharts.create_date =
            data.carouselCharts.create_date || data.carouselCharts.createDate;
          this.data = data.carouselCharts;
          // console.log(this.data.appendix);
        }
      });
    },
    getUser(cbType) {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.$getHttp("/mob/user/getIsCollection", {
          userId: user.id,
          cbType: 4,
          type: 1,
          relationId: this.$route.query.id
        }).then(data => {
          if (data.code == 200) {
            this.isCollection = data.isCollection;
          }
        });
        this.$postHttp("/mob/user/saveUserCollection", {
          userId: user.id,
          type: 2,
          cbType: cbType,
          relationId: this.$route.query.id
        }).then(data => {});
      } else {
        this.loginstate = false;
      }
    },
    //楼盘资讯详情
    getTalesPromotionDetail(id) {
      this.$getHttp("/mob/user/getTalesPromotionDetail", { id: id }).then(
        data => {
          if (data.code == 200) {
            this.data = data.map;
          }
        }
      );
    },
    //户型介绍详情
    getHouseTypeDetail(id) {
      this.$getHttp("/mob/home/getHouseTypeDetail", { id: id }).then(data => {
        if (data.code == 200) {
          this.data = data.houseType;
          // this.time = data.houseType.createDate
          // this.title = data.houseType.title
          // this.content = data.houseType.content
        }
      });
    },
    //看点详情
    getWatchDetail(id) {
      this.$getHttp("/mob/home/getWatchDetail", { id: id }).then(data => {
        if (data.code == 200) {
          this.data = data.tWatchInfo;
          // this.time = data.tWatchInfo.createDate
          // this.title = data.tWatchInfo.title
          // this.content = data.tWatchInfo.content
        }
      });
    },
    //店铺详情
    getArticleInfoDetail(id) {
      this.$getHttp("/mob/user/getArticleInfoDetail", { id: id }).then(data => {
        if (data.code == 200) {
          this.data = data.map;
          // this.time = data.tWatchInfo.createDate
          // this.title = data.tWatchInfo.title
          // this.content = data.tWatchInfo.content
        }
      });
    },
    //协议
    getText(id) {
      this.$getHttp("/mob/user/getText", { type: id }).then(data => {
        if (data.code == 200) {
          data.list[0].createDate = this.getTime(data.list[0].create_date);
          this.data = data.list[0];
        }
      });
    },
    addIntegral(val, title) {
      this.$postHttp("/mob/iteration/addIntegral", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        ruleNumber: val,
        title: title
      }).then(res => {});
    },
    collect(type) {
      if (this.loginstate) {
        if (type == 1) {
          this.$postHttp("/mob/user/saveUserCollection", {
            userId: JSON.parse(localStorage.getItem("userInfo")).id,
            type: 1,
            cbType: 4,
            relationId: this.$route.query.id
          }).then(data => {
            if (data.code == 200) {
              this.isCollection = 1;
              this.$message({
                message: "收藏成功！",
                type: "success",
                offset: 120,
                duration: 2000
              });
              this.addIntegral(5, "收藏看点");
            }
          });
        } else {
          this.$postHttp("/mob/user/saveUserCollection", {
            userId: JSON.parse(localStorage.getItem("userInfo")).id,
            type: 1,
            cbType: 4,
            relationId: this.$route.query.id,
            cancel: 1
          }).then(data => {
            if (data.code == 200) {
              this.isCollection = 0;
              this.$message({
                message: "取消收藏成功！",
                type: "success",
                offset: 120,
                duration: 2000
              });
            }
          });
        }
      } else {
        this.$message({
          message: "请登录之后在收藏看点！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    getTime(value) {
      var b = new Date(value);
      var year = b.getFullYear() + "-";
      var month = b.getMonth() + 1;
      var date = b.getDate();
      var hour = b.getHours();
      var min = b.getMinutes();
      var second = b.getSeconds();
      if (month < 10) {
        month = "0" + (b.getMonth() + 1) + "-";
      } else {
        month = b.getMonth() + 1 + "-";
      }
      if (date < 10) {
        date = "0" + b.getDate();
      }
      if (hour < 10) {
        hour = "0" + b.getHours() + ":";
      } else {
        hour = b.getHours() + ":";
      }
      if (min < 10) {
        min = "0" + b.getMinutes() + ":";
      } else {
        min = b.getMinutes() + ":";
      }
      if (second < 10) {
        second = "0" + b.getSeconds();
      }
      var str =
        String(year) +
        String(month) +
        String(date) +
        " " +
        String(hour) +
        String(min) +
        String(second);
      return str;
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}
// strong{
// 	font-weight: 900;
// }
.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;
  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;
    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }
    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;
      img {
        /* width: 60px;
        height: 60px; */
      }
      span {
        vertical-align: middle;
      }
    }
    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;
      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }
      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }
      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }
    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}
/deep/ .contenttext {
  strong {
    font-weight: bold;
  }
}
/deep/ .contenttext a {
  color: blue !important;
}
</style>
